<template>
    <div>
        <div ref="wrapper">
            <header>
                <!-- 下滑50px后消失 -->
                <div class="header-returns" v-show="isShow">
                    <div>
                        <i class="iconfont icon-xiangzuojiantou "></i>
                    </div>
                    <div>
                        <i class="iconfont icon-xiangzuojiantou "></i>
                    </div>
                </div>
                <!-- 下滑50px后出现吸顶 -->
                <div class="header-bar" v-show="!isShow" :style="styleOption">
                    <div>
                        <i class="iconfont icon-xiangzuojiantou "></i>
                    </div>
                    <div>
                        <span>商品详情</span>
                        <span>商品评价</span>
                    </div>
                    <div>
                        <i class="iconfont icon-xiangzuojiantou "></i>
                    </div>
                </div>
            </header>
        </div>
    </div>
</template>
<script>
import BetterScroll from "better-scroll";

export default {
  data() {
    return {
      styleOption: {},
      betterScroll: "",
      isShow: false
    };
  },
  mounted() {
    this.betterScroll = new BetterScroll(this.$refs.wrapper, {
      movable: true,
      zoom: true,
      click: true,
      bounce: false,
      probeType: 3
    });
    this.betterScroll.on("scroll", pos => {
      let posY = Math.abs(pos.y);
      let opacity = posY / 180;
      opacity = opacity > 1 ? 1 : opacity; //如果opacity大于1就使它等于1，否则让他动态改变
      this.styleOption = {
        opacity: opacity
      };
      if (posY >= 50) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
header {
  overflow: auto;
  height: 2rem;
}
</style>

 
 
 

 

